<template>
	<view class="page">
		<view class="flex-SB head-box" style="margin-top: 30rpx;padding: 10rpx 30rpx;">
			<view class="head-item" style="font-size: 32rpx;">
				
			</view>
			<view class="head-item" style="text-align: center;color: #1d6efa;font-size: 28rpx;">
				{{timeStr}}
			</view>
			<view class="head-item">

			</view>
		</view>

		<view class="block" style="position: relative;background-color: transparent;width: 720rpx;">
			<!-- 			<view class="flex-SB headers">
				<view class="textB">最近一小时{{typeStr}}</view>
				<view class="subtext">{{timeStr}}</view>
			</view> -->
			<view style="height: 450rpx;"><l-echart ref="emotionChartGauge"></l-echart></view>
			<view style="width: 400rpx;font-size: 32rpx;margin: 30rpx auto;text-align: center;font-weight: 600;display: flex;align-items: center;justify-content: center;" 
				:style="{color:emoObj.color}" @click="showFeed = true">
				您现在{{typeStr=='心情'?'心情':''}}{{emotionData.short}}
				<text style="font-size: 11px;color: #848282;">反馈</text>
				<u-icon name="edit-pen"></u-icon>
			</view>
			<view
				style="margin: 30rpx auto 30rpx;color: #999999;font-size: 28rpx;">
				<view style="color: #796d6d;font-size: 32rpx;" v-for="str in emoLongStr" :key="str">
					{{str}}</view>
			</view>
		</view>
<!-- 		<view v-show="showFeed" class="blocksfeed">
			<view style="padding: 25rpx;font-size: 24rpx;">{{feedStrs[0]}}</view>
			<view style="display: flex;">
				<view class="rebox" @click="feedback(3,1)">
					<image class="refaceimg" src="https://baxztech.com/bian_admin_api/public/bianmp/3.png"></image>
					<view>{{feedStrs[0]}}</view>
				</view>
				<view class="rebox" @click="feedback(3,2)">
					<image class="refaceimg" src="https://baxztech.com/bian_admin_api/public/bianmp/2.png"></image>
					<view>{{feedStrs[1]}}</view>
				</view>
				<view class="rebox" @click="feedback(3,3)">
					<image class="refaceimg" src="https://baxztech.com/bian_admin_api/public/bianmp/1.png"></image>
					<view>{{feedStrs[2]}}</view>
				</view>
			</view>
		</view> -->
		<view style="height: 40rpx;"></view>
		<view class="block" style="position: relative;box-shadow: 4rpx 8rpx 16rpx #a4aede2e; background: #ffffff;backdrop-filter: blur(10px);">
<!-- 			<view class="flex-SB headers">
				<view class="textB">最近一小时{{typeStr}}</view>
				<view class="subtext">{{timeStr}}</view>
			</view> -->
			<view style="height: 460rpx;"><l-echart ref="emotionChartDetail"></l-echart></view>
		</view>
		<!-- 		<view class="block" style="margin: 50rpx auto;">
			<view class="flex-SB headers">
				<view class="textB">您现在{{typeStr}}指数</view>
				<view class="subtext">{{timeStr}}</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;margin: 20rpx auto;">
				<image :src="emoObj.icon" style="width: 96rpx;height: 96rpx;margin-right: 15rpx;"></image>
				<view style="font-size: 72rpx;margin-left: 15rpx;" :style="{color:emoObj.color}">{{emotionData.index}}</view>
			</view>
			<view style="width: 400rpx;font-size: 28rpx;margin: 48rpx auto;text-align: center;font-weight: 600;" :style="{color:emoObj.color}">
				您现在{{typeStr=='心情'?'心情':''}}{{emotionData.short}}
			</view>
			<view>
				<view class="slider" :style="{background:sliderBg}">
					<view class="slider-dot" :style="{left:percent+'%'}"></view>
				</view>
				<view style="width: 620rpx;margin: 20rpx auto;display: flex;justify-content: space-between;color: #666666;font-size: 24rpx;">
					<view v-for="str in emoStrType" :key="str">{{str}}</view>
				</view>
			</view>
			<view style="width: 622rpx;background: #F6F7FB;margin: 30rpx auto 50rpx;color: #999999;padding: 8rpx;font-size: 28rpx;">
				<view style="text-indent: 2em;color: #796d6d;font-size: 32rpx;" v-for="str in emoLongStr" :key="str">{{str}}</view>
			</view>
		</view> -->
		<view style="height: 40rpx;"></view>
		<view class="block" v-show="showNosic" style="background: linear-gradient(336.34deg, #81ddff00 -115.77%, #0e38e336 234.26%);box-shadow: 0rpx 7.9rpx 53.6rpx #e1e1e3cc;">
			<view class="flex-SB headers">
				<view class="textB">为您推荐</view>
				<view class="subtext flex-SB" @click="$navigateTo('/pagesA/pages/list/nosic')">
					<text>更多</text>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex-SB" style="align-items: start;" @click="toNosic">
				<view>
					<image :src="nosic.icon_url"
						style="width: 208rpx;height: 208rpx;margin-right: 20rpx;border-radius: 50rpx;margin: 20rpx;"></image>
				</view>
				<view style="padding-left: 20rpx;">
					<view class="u-line-1" style="font-size: 32rpx;font-weight: bold;">
						{{nosic.title}}
					</view>
					<view class="u-line-3" style="font-size: 30rpx;color: #999999;margin: 20rpx 0;line-height: 36rpx;">
						{{nosic.intro}}
					</view>
					<view style="display: flex;align-items: center;">
						<view class="line1 aline"></view>
						<view class="line2 aline"></view>
						<view class="line3 aline"></view>
						<view class="line4 aline"></view>
						<view class="line1"></view>
						<view class="line2"></view>
						<view class="line3"></view>
						<view class="line4"></view>
						<view class="line1"></view>
						<view class="line2"></view>
						<view class="line3"></view>
						<view class="line4"></view>
						<view class="line3"></view>
						<view class="line2"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<u-popup :safeAreaInsetBottom="false" :overlay="true" :round="15" :show="showFeed" mode="center" @close="showFeed = false" bgColor="#fff">
			<view style="font-size: 32rpx;color: #000;text-align: center;margin-top: 15rpx;">情绪反馈功能</view>
			<view style="display: flex;justify-content: space-around;">
				<view style="padding: 30rpx;width: 350rpx;font-size: 10px;text-indent: 2em;">
						我们的情绪识别模型会为每位用户建立个性化的情绪基线，用于更精准地识别状态。但由于个体差异显著，模型自动计算的基线有时可能无法完全反映真实情况。
						借助“情绪反馈功能”，用户可以主动标记或反馈当前情绪状态。系统会将这些反馈与模型结果结合，持续优化并修正个人基线，使情绪识别更加符合用户自身特征，长期使用效果也会越来越精准。
				</view>
				<view style="width: 240rpx;display: flex;flex-direction: column;text-align: center;padding-right: 30rpx;padding-top: 20rpx;">
					<view @click="feedback(3,1,feedStrs[3])" class="feed-item">{{feedStrs[3]}}</view>
					<view @click="feedback(3,2,feedStrs[2])" class="feed-item">{{feedStrs[2]}}</view>
					<view @click="feedback(3,3,feedStrs[1])" class="feed-item">{{feedStrs[1]}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	export default {
		components: {
			LEchart
		},
		computed: {
			...mapState(['member', 'tiredInfo', 'stressInfo', 'emotionInfo']),
		},
		data() {
			return {
				feedType:1,
				showFeed:false,
				feedStrs:['','',''],
				emoDataList: [],
				emoTimeList: [],
				emoStrType: [],
				emoLongStr: [],
				sliderBg: 'linear-gradient(130deg, #FF7875 0%, #5CDBD3 50%, #95DE64 100%)',
				timeStr: '00:00',
				typeStr: '',
				emoObj: {},
				emotionData: {},
				nosic: {},
				percent: 0,
				showNosic: false,
				statusBarHeight: getApp().globalData.statusBarHeight,
				date_time:0,
				pageType:""
			};
		},
		onLoad(opt) {
			this.date_time = opt.time;
			this.feedType = opt.feedType;
			let str = uni.$u.timeFormat(opt.time, 'yyyy-mm-dd hh:MM')
			this.pageType = opt.type;
			switch (opt.type) {
				case 'emotion':
				    this.feedStrs = ['您现在感觉心情怎么样？','不错','一般','不太好'];
					this.typeStr = '心情'
					this.emoStrType = ['心情一般', '心情平和', '比较愉悦']
					break;
				case 'tired':
					this.feedStrs = ['您现在觉得累吗？','精力充沛','一般','感到劳累'];
					this.emoStrType = ['略有疲惫', '精力适中', '精力充沛']
					this.typeStr = '精力'
					break;
				case 'stress':
					this.feedStrs = ['您现感到有压力吗？','没有压力','一般','感到有压力'];
					this.sliderBg = 'linear-gradient(130deg, #95DE64 0%, #5CDBD3 50%, #FF7875 100%)';
					this.typeStr = '压力'
					this.emoStrType = ['较为松弛', '稍有压力', '有压力']
					break;
			}
			uni.setNavigationBarTitle({
				title:this.typeStr+"指数"
			})
			let filde = opt.type + "Info";
			this.emotionData = this[filde];
			this.percent = this.emotionData.index - 2;
			this.emoObj = this.getEmoObj(this.emotionData.index, opt.type)
			if (this.emotionData.long.search('-') != -1) {
				this.emoLongStr = this.emotionData.long.split('-')
			} else {
				this.emoLongStr = [this.emotionData.long]
			}
			uni.$u.http.post('/client/hour_recently', {
				imei: this.member.imei,
				time: opt.time
			}).then(res => {
				if (res.status == 200) {
					let data = res.data[opt.type + 'Data'];
					let timeInt = parseInt(opt.time)
					let didx = 0;
					for (let item of data) {
						item.tired_index = 100 - item.tired_index;
						let dateStr = uni.$u.timeFormat(item.time_str, 'hh:MM')
						this.emoTimeList.unshift(dateStr)
						this.emoDataList.unshift(item[opt.type + '_index'])
					}
					if (data.length < 4) {
						this.emotionData.index = this.emoDataList[this.emoDataList.length - 1];
					}
					this.timeStr = this.emoTimeList[0] + '-' + this.emoTimeList[this.emoTimeList.length - 1];
				 	this.initEmotionDetail(this.emoDataList, this.emoTimeList, opt.type,this.typeStr);
					this.initEmotionGauge(this.emotionData.index, opt.type,"");
					this.getNosic(opt.type, this.emotionData.index)
					// this.feedbackInit();
				}
			})
		},
		methods: {
			feedback(type,tag,str){
				// this.initEmotionGauge(this.emotionData.index, this.pageType,tag);
				// this.emotionData.short = str;
				let time = 0;
				// if(this.lastEmotion.date_time){
				// 	time = this.lastEmotion.date_time
				// }
				// console.log(uni.$u.timeFormat(time, 'yyyy-mm-dd hh:MM'));
				// this.feedType+=1;
				this.showFeed = false;
				uni.$u.http.post('/client/updateUserTag', {
					imei: this.member.imei,
					user_tag: tag+"",
					tag_type: this.feedType,
					date_time:this.date_time
				}).then(res => {
					// if(type == 3){
						let feed = {
							imei:this.member.imei,
							date:uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
						}
						uni.setStorageSync('feedback',feed)
						this.$u.toast("感谢您的反馈！")
					// }
					
				})
			},
			feedbackInit(){
				let feedback = uni.getStorageSync('feedback');
				if(feedback && feedback.imei == this.member.imei){
					let time = new Date().getTime();
					let ftime = new Date(feedback.date).getTime();
					if((ftime+24*60*60*1000)<time  && this.lastEmotion.user_tag<1){
						this.showFeed = true;
					}
				}else if(!feedback || feedback.imei != this.member.imei){
					this.showFeed = true;
				}
			},
			toNosic() {
				uni.navigateTo({
					url: '/pagesA/pages/audio/audio',
					success: (res) => {
						res.eventChannel.emit('datas', this.nosic)
					}
				})
			},
			getNosic(type, num) {
				let data = {
					target: "心情",
					level: "有点差",
					timestamp: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
				}
				if (num > 69) {
					if (type == 'emotion') {
						data.level = "愉悦"
						data.target = "心情"
					}
					if (type == 'stress') {
						data.level = "压力山大"
						data.target = "压力"
					}
					if (type == 'tired') {
						data.level = "精力充沛"
						data.target = "疲劳"
					}
				} else if (num > 49) {
					if (type == 'emotion') {
						data.level = "一般"
						data.target = "心情"
					}
					if (type == 'stress') {
						data.level = "稍有压力"
						data.target = "压力"
					}
					if (type == 'tired') {
						data.level = "略有疲惫"
						data.target = "疲劳"
					}
				} else {
					if (type == 'emotion') {
						data.level = "有点差"
						data.target = "心情"
					}
					if (type == 'stress') {
						data.level = "放松"
						data.target = "压力"
					}
					if (type == 'tired') {
						data.level = "十分疲惫"
						data.target = "疲劳"
					}
				}
				let method = 'heartide.bixin.audio.calc'
				uni.$u.http.post('/client/serviceResource', {
					data: JSON.stringify(data),
					method
				}).then(res => {
					if (res.code == '0') {
						this.nosic = JSON.parse(res.data)[0]
						if (this.nosic) {
							this.showNosic = true;
						}
					}
				});
			},
			getEmoObj(index,type){
				//1 心情 2 压力 3 疲劳
				if(index<= 49){
					if(type=='emotion'){
						return {
							color:'#FF0036',
							title:'较差'
						}
					}
					if(type=='stress'){
						return {
							color:'#55CF04',
							title:'放松'
						}
					}
					if(type=='tired'){
						return {
							color:'#FF0036',
							title:'十分疲惫',
						}
					}
				}else if(index>=50 && index<=69){
					if(type=='emotion'){
						return {
							color:'#01D6D6',
							title:'一般'
						}
					}
					if(type=='stress'){
						return {
							color:'#01D6D6',
							title:'稍有压力'
						}
					}
					if(type=='tired'){
						return {
							color:'#01D6D6',
							title:'有点疲惫'
						}
					}
				}else if(index>=70){
					if(type=='emotion'){
						return {
							color:'#55CF04',
							title:'愉悦'
						}
					}
					if(type=='stress'){
						return {
							color:'#FF0036',
							title:'压力山大',
						}
					}
					if(type=='tired'){
						return {
							color:'#55CF04',
							title:'精力充沛'
						}
					}
				}
			},
			toBack() {
				uni.navigateBack()
			},
			initEmotionGauge(data, type,img) {
				let icnoImg = '';
				let Img = "1";
				if(data<= 49){
					if(type == 'stress'){
						Img = "1";
					}
					else{
						Img = "3";
					}
				}else if(data>=50 && data<=69){
					Img = "2";
				}else if(data>=70){
					if(type == 'stress'){
						Img = "3";
					}else{
						Img = "1";
					}
				}
				if(img){
					Img = img;
				}
				icnoImg = `https://baxztech.com/bian_admin_api/public/bianmp/${Img}.png`
				let colorLine = [{
						offset: 0,
						color: '#ff3d1f',
					},
					{
						offset: 0.25,
						color: '#fdc956',
					},
					{
						offset: 0.5,
						color: '#fcc856',
					},
					{
						offset: 0.65,
						color: '#7a87a1',
					},
					{
						offset: 0.65,
						color: '#7a87a1',
					},
					{
						offset: 1,
						color: '#45caff',
					},
				]
				if(type == 'stress'){
					var reversedArr = [];
					for (var i = colorLine.length - 1; i >= 0; i--) {
					  reversedArr.push({offset:1-colorLine[i].offset,color:colorLine[i].color});
					}
					colorLine = reversedArr;
				}
				let color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorLine);
				let colorSet = [
					[1, color],
				];
				let option = {
					series: [{
						top:'10%',
						type: 'gauge',
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 16,
								color: colorSet
							}
						},
						pointer: {
							showAbove: true,
							icon: "circle",
							itemStyle: {
								color: '#fff'
							},
							width: 18,
							length: '180%'

						},
						axisTick: {
							splitNumber:2,
							distance: 10,
							length: 2,
							lineStyle: {
								type: 'dashed',
								cap: 'round',
								color: '#ccc',
								width: 2
							}
						},
						splitLine: {
							show: false,
							distance: -10,
							length: 30,
							lineStyle: {
								color: '#000',
								width: 4
							}
						},
						axisLabel: {
							show: false,
							color: 'inherit',
							distance: 20,
							fontSize: 20
						},
						detail: {
							padding: [10, 4, 5, 6],
							valueAnimation: true,
							top: 200,
							formatter: [
								'{a|{value}}',
								'{Sunny|}'
							].join('\n'),
							rich: {
								a: {
									fontSize: 38,
									fontWeiht:'blod',
									height: 100,
									lineHeight: 50
								},
								b: {
									color: '#ccc',
									fontSize: 18,
								},
								Sunny: {
									lineHeight: 50,
									height: 50,
									align: 'center',
									backgroundColor: {
										image: icnoImg
									}
								},
							},
							color: 'inherit'
						},

						data: [{
							value: data
						}]
					}]
				};
				this.$nextTick(()=>{
					this.$refs.emotionChartGauge.init(echarts, chart => {
						chart.setOption(option);
					});
				})

			},
			initEmotionDetail(data, time, type,tit) {
				let title = '最近一小时'+tit;
				let typeIdx = this.emoStrType
				let lowC = '#FF7875'
				let higC = '#95DE64'
				if (type == 'stress') {
					lowC = '#95DE64'
					higC = '#FF7875'
				}
				let option = {
					title:{
						text:title,
						subtext: '数据量'+data.length,
						top:'5'
					},
					grid: {
						top:"30%",
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							// rotate: 45,
							color: '#A0A4AA'
						},
						type: 'category',
						data: time
					}],
					yAxis: {
							splitLine: {
								show: true,
								lineStyle:{
									type: [5, 10],
									dashOffset: 5,
									color:'#ccc',
								}
							},
							max: 100,
							min: 0,
							type: 'value',
							minInterval: 1,
							interval: 25,
							axisLabel: {
								fontSize: 10,
								formatter: function(value, idx) {
									return value;
								}

							},
						},
					series: [{
						name: 'his',
						type: 'bar',
						data: data,
						barMaxWidth: 7,
						label: {
							color: '#A0A4AA',
							show: true,
							position: 'top',
							valueAnimation: true
						},
						itemStyle: {
							borderRadius: [3, 3, 0, 0],
							color: function(e, idx) {
								if (e.dataIndex < data.length-1) {
									return '#14b3f8';
								} else{
									return '#fdc956'
								}
							}
						},

					}]
				};
				this.$nextTick(()=>{
					this.$refs.emotionChartDetail.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.navbar {
		width: 100%;
		position: relative;
		height: 44px;
		line-height: 44px;
	}

	.headers {
		padding: 15rpx;

		.text {
			font-size: 32rpx;
		}

		.textB {
			font-size: 32rpx;
			font-weight: bold;
		}

		.subtext {
			font-size: 26rpx;
			color: #969696;
		}
	}
	
	.head-item {
		min-width: 200rpx;
		min-height: 60rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.slider {
		position: relative;
		width: 620rpx;
		height: 18rpx;
		margin: 0 auto;
		border-radius: 9rpx;
	}

	.slider-dot {
		width: 32rpx;
		height: 32rpx;
		background: #fff;
		border-radius: 16rpx;
		position: absolute;
		top: -10rpx;
		border: 2px solid #ccc;
	}
	.wrapline1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.wrapline3 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.line1,.line2,.line3,.line4,.line5{
		margin: 0 2rpx;
		width: 2rpx;
		background: #777777;
	}
	.aline{
		background: #1d6efa;
	}
	.line1{
		height: 10rpx;
	}
	.line2{
		height: 15rpx;
	}
	.line3{
		height: 20rpx;
	}
	.line4{
		height: 40rpx;
	}
	.line5{
		height: 35rpx;
	}
	.blocksfeed{
		background-color: #fff;
		margin: 0 auto;
		border-radius: 20rpx;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		margin-top: 30rpx;padding-bottom: 20rpx;
		width: 686rpx;
	}
	.index-item {
		border-radius: 10px;
		background-color: #FBFCFC;
	}
	.refaceimg{
		width: 80rpx;
		height: 80rpx;
	}
	.rebox{
		margin-left: 60rpx;
		text-align: center;
		font-size: 20rpx;
	}
	.feed-item{
		margin-top: 15rpx;
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		box-shadow: 0rpx 0rpx 10rpx #666;
	}
</style>